body {
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;

    main {
        width: 400px;
        height: 300px;
        overflow: hidden;
        position: relative;

        &:hover {

            section,
            ul>li:nth-child(1)::after {
                animation-play-state: paused;
            }
        }

        section {
            width: 2400px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            animation-name: slide;
            animation-duration: 6s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(6, end);
            div {
                border-radius: 40px;
                overflow: hidden;
            }
        }

        @keyframes slide {
            to {
                transform: translateX(-2400px);
            }
        }

        ul {
            position: absolute;
            bottom: 10px;
            display: grid;
            grid-auto-flow: column;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            gap: 20px;

            li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: #ddd;
                position: relative;

                &:nth-child(1)::after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: #555;
                    opacity: .8;
                    position: absolute;
                    top: 0;
                    left: 0;
                    animation-name: li-move;
                    animation-duration: 6s;
                    animation-timing-function: steps(6, end);
                    animation-iteration-count: infinite;
                    z-index: 2;
                }

                @keyframes li-move {
                    to {
                        transform: translateX(calc(6 * 100% + 6 * 20px));
                    }
                }
            }
        }
    }
}